<template>
  <div class="login-center">
    <div class="login-wrap">
      <div class="ms-title1">
        <img src="../../assets/img/logo_login_fspay.png" alt="" />
      </div>
      <div class="ms-login">
        <div class="ms-title">
          <img src="../../assets/img/zongheguanli.png" alt />
        </div>
        <div class="midillBox">
          <el-tabs
            v-model="activeName"
            :stretch="true"
            @tab-click="handleClick"
          >
            <el-tab-pane label="账号登录" name="first">
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="0px"
                class="ms-content"
              >
                <el-form-item prop="username" class="ms-content1">
                  <el-input
                    v-model="ruleForm.username"
                    placeholder="请输入账号"
                    size="medium"
                  >
                    <i slot="prefix" class="el-input__icon el-icon-user"></i>
                  </el-input>
                </el-form-item>
                <el-form-item prop="password" class="ms-content1">
                  <el-input
                    type="password"
                    placeholder="请输入密码"
                    v-model="ruleForm.password"
                    size="medium"
                  >
                    <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                  </el-input>
                </el-form-item>
                <div class="validation">
                  <el-input
                    class="wid"
                    v-model="ruleForm.validation"
                    placeholder="验证码"
                    size="medium"
                    @keyup.enter.native="submitForm('ruleForm')"
                  >
                  </el-input>
                  <!-- <i slot="prefix" class="el-input__icon el-icon-tickets"></i> -->
                  <div slot="suffix" class="code" @click="refreshCode">
                    <Sidentify
                      :identifyCode="identifyCode"
                      style="height: 40px"
                    ></Sidentify>
                  </div>
                </div>
                <div class="passwordBox">
                  <el-checkbox v-model="checked">记住密码</el-checkbox>
                  <span class="forgotpassword" @click="forget()">忘记密码</span>
                </div>
                <div class="login-btn">
                  <el-button
                    type="primary"
                    size="medium"
                    :loading="loginLoading"
                    @click="submitForm('ruleForm')"
                    >登录</el-button
                  >
                </div>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="验证码登录" name="second">
              <el-form
                ref="form"
                :model="form"
                :rules="rules2"
                label-width="0px"
                class="ms-content"
              >
                <el-form-item prop="CellPhone" ref="phone" class="ms-content1">
                  <el-input
                    v-model="form.CellPhone"
                    size="medium"
                    placeholder="请输入手机号"
                  >
                    <el-select placeholder="+86"></el-select>
                    <i slot="prefix" class="el-input__icon el-icon-user"></i>
                  </el-input>
                </el-form-item>

                <el-form-item prop="VerificationCode" class="ms-content1">
                  <el-input
                    v-model="form.VerificationCode"
                    size="medium"
                    placeholder="请输入验证码"
                  >
                    <i slot="prefix" class="el-input__icon el-icon-lock"></i>

                    <el-button
                      slot="suffix"
                      :disabled="disabled"
                      @click="getCode"
                      class="vButton"
                    >
                      <span class="Time">{{ btnTxt }}</span>
                    </el-button>
                  </el-input>
                </el-form-item>
                <div class="login-btn">
                  <el-button @click="submit" size="medium" type="primary">
                    登 录
                  </el-button>
                </div>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="login-tips">
      <div class="login-tips-title">
        <p>友情链接</p>
      </div>
      <div class="login-tips-title">
        <p>工业和信息化部</p>
        <p>中国信息通信研究院</p>
        <p>安全联盟</p>
      </div>
      <div class="login-tips-title">
        <img
          @click="icpLinkClick"
          src="http://sb-merchant.oss-cn-hangzhou.aliyuncs.com/202407051124453003.png"
          alt=""
        />
      </div>
      <div class="login-tips-title">
        <p>
          版权所有
          @互联商服务 未经许可不得复制、转载或摘编，违者必究!
        </p>
      </div>
      <div class="login-tips-title">
        <p>
          ICP许可证号:
          <a
            href="https://beian.miit.gov.cn/?spm=5176.13850613.J_9220772140.60.349b3f6fWb93S1#/Integrated/recordQuery/"
            target="_blank"
            style="color: rgb(26, 64, 135)"
          >
          浙ICP备2024116936号-1</a
          >
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import Sidentify from "../page/identify";
import { login, testLogin, APIgetPhoneCode } from "@/api/api";
import Cookies from "js-cookie";
import md5 from "js-md5";
export default {
  data: function () {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("手机号不能为空"));
      }
      if (
        !/^(1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9]))\d{8}$/.test(
          value
        )
      ) {
        callback(new Error("手机号格式不正确"));
      }
      callback();
    };
    return {
      activeName: "first",
      identifyCodes: "1234567890",
      identifyCode: "",
      loginLoading: false,
      checked: false,
      form: {
        CellPhone: "",
        VerificationCode: "",
      },
      disabled: false,
      btnTxt: "获取验证码",
      ruleForm: {
        username: "",
        password: "",
        validation: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      rules2: {
        CellPhone: [
          { required: true, trigger: "blur", message: "请输入11位手机号" },
          {
            required: true,
            trigger: "blur",
            min: 11,
            max: 11,
            message: "长度不符合",
          },
          { required: true, trigger: "blur", validator: validatePhone },
        ],
        VerificationCode: [
          { required: true, trigger: "blur", message: "请输入6位验证码" },
          {
            required: true,
            trigger: "blur",
            min: 6,
            max: 6,
            message: "验证码错误",
          },
        ],
      },
    };
  },
  components: {
    Sidentify,
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
    if (Cookies.get("logininfo")) {
      this.checked = true;
      this.ruleForm.username = Cookies.get("logininfo").split("&")[0];
      this.ruleForm.password = Cookies.get("logininfo").split("&")[1];
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //获取手机验证码方法
    getCode() {
      // 校验手机号码
      if (!this.form.CellPhone) {
        //号码校验不通过
        this.$message({
          message: "请输入手机号",
          type: "warning",
        });
        //正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
      } else if (
        !/^(1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9]))\d{8}$/.test(
          this.form.CellPhone
        )
      ) {
        // 失去焦点后自动触发校验手机号规则
        this.$message({
          message: "请输入正确手机号",
          type: "warning",
        });
      } else {
        // 封装的axios接口
        APIgetPhoneCode({
          phone: this.form.CellPhone,
        }).then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.time = 60;
            this.disabled = true;
            //调用倒计时方法
            this.timer();
            this.$message({
              message: "发送成功",
              type: "success",
            });
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },

    // 提交按钮
    submit() {
      if (!this.form.CellPhone) {
        this.$message({
          message: "请输入手机号",
          type: "warning",
        });
      } else if (!this.form.VerificationCode) {
        this.$message({
          message: "请输入验证码",
          type: "warning",
        });
      } else {
        this.loginFunction({
          phone: this.form.CellPhone,
          code: this.form.VerificationCode,
          type: 2,
        });
      }

      // this.getCode(({ data }) => {
      //   if (data.code === 200) {
      //     this.$router.push("/");
      //   } else {
      //     this.$message.error(data.data.rules.message);
      //   }
      // });
    },
    // 倒计时方法
    timer() {
      if (this.time > 0) {
        this.time--;
        // console.log(this.time);
        this.btnTxt = this.time + "s后重新获取验证码";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btnTxt = "获取验证码";
        this.disabled = false;
      }
    },
    submitForm(formName) {
      // console.log(this.checked)
      // this.$refs[formName].validate((valid) => {
      //     if (valid) {
      // sessionStorage.setItem('ms_username',this.ruleForm.username);
      // this.$router.push('/');
      // } else {
      //     console.log('error submit!!');
      //     return false;
      // }
      // });
      this.loginLoading = true;
      if (this.ruleForm.validation != this.identifyCode) {
        this.refreshCode();
        this.$message({
          showClose: true,
          message: "验证码错误",
          type: "error",
        });
        this.loginLoading = false;
      } else {
        this.loginFunction({
          username: this.ruleForm.username,
          password: md5(this.ruleForm.password),
          type: 1,
        });
      }
    },
    loginFunction(data) {
      login(data).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          if (this.checked) {
            var inFifteenMinutes = new Date(
              new Date().getTime() + 7 * (24 * 60 * 60 * 1000)
            );
            Cookies.set(
              "logininfo",
              this.ruleForm.username + "&" + this.ruleForm.password,
              { expires: inFifteenMinutes }
            );
          } else {
            Cookies.remove("logininfo");
          }
          this.$message({
            showClose: true,
            message: "登录成功",
            type: "success",
          });
          sessionStorage.setItem("token", res.data.token);
          sessionStorage.setItem("tokenTime", new Date().getTime());
          sessionStorage.setItem("key", res.data.key);
          sessionStorage.setItem("instNo", res.data.instNo);
          let menulist = res.data.menuList;
          if (
            res.data.userInfo.mid != 18446 &&
            res.data.userInfo.rolesId != 1 &&
            res.data.userInfo.rolesId != 8
          ) {
            menulist.forEach((item, index) => {
              if (item.index == "9") {
                menulist.splice(index, 1);
              }
            });
          }
          let roleList = [];
          roleList.push("login", "dashboard", "403", "userinfo");
          menulist.forEach((val) => {
            roleList.push(val.index);
            if (val.subs) {
              for (let k in val.subs) {
                roleList.push(val.subs[k].index);
                if (val.subs[k].subTrdMenu.length > 0) {
                  for (let j in val.subs[k].subTrdMenu) {
                    roleList.push(val.subs[k].subTrdMenu[j].index);
                  }
                }
              }
            }
          });
          sessionStorage.setItem("roleList", JSON.stringify(roleList));
          sessionStorage.setItem("menuList", JSON.stringify(menulist));
          // sessionStorage.setItem(
          //   "menuList",
          //   JSON.stringify(res.data.menuList)
          // );
          sessionStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
          sessionStorage.setItem("username", res.data.userInfo.username);
          sessionStorage.setItem("oemFlag", res.data.oemFlag);
          sessionStorage.setItem("oeminfo", JSON.stringify(res.data.oemInfo));

          this.$store.state.logininfo = res.data;
          //  console.log(this.$store.state.logininfo)
          if (res.data.passwordFlag == 1) {
            if (
              res.data.userInfo.rolesId == 5 ||
              res.data.userInfo.rolesId == 6
            ) {
              this.$router.push({
                path: "/",
                query: {
                  initial: "2",
                },
              });
            } else {
              this.$router.push({
                path: "/",
                query: {
                  initial: "1",
                },
              });
            }
          } else {
            this.$router.push({ path: "/" });
          }
        } else {
          this.refreshCode();
          this.$message({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
        this.loginLoading = false;
      });
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCode, 4);
      // console.log("当前验证码==", this.identifyCode);
    },
    icpLinkClick() {
      window.open(
        "https://myssl.com/open.gdyfsk.com?domain=open.gdyfsk.com&status=q",
        "_blank"
      );
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
    },
    forget() {
      this.$router.push({ path: "/forgetpassword" });
    },
  },
};
</script>

<style scoped lang="less">
// .midillBox {
//   padding-bottom: 30px;
// }
// .login-container {
//   // width: 450px;
//   // border: 1px solid #eaeaea;
//   // margin: 180px auto;
//   padding: 35px 35px 15px 35px;
//   // border-radius: 15px;
//   // box-shadow: 0 0 25px #cac6c6;
//   background-color: #ffffff;
//   box-sizing: border-box;
//   //修改element的样式的方法有多种，/deep/只是其中一种
//   /deep/ .el-input__inner {
//     width: 120%;
//     border: 0px;
//     border-bottom: 1px solid;
//   }
//   .el-button {
//     border: 0px;
//     margin: -80px;
//     .span {
//       margin-left: 50px;
//     }
//   }
//   .login_title {
//     text-align: center;
//     margin-bottom: 40px;
//     color: #505458;
//   }
//   .el-input {
//     width: 198px;
//   }
//   .login_button {
//     margin-left: 56px;
//     margin-top: 10px;
//   }
//   .el-button--medium {
//     width: 252px;
//   }
//   .time {
//     width: 50px;
//   }
// }
/deep/ .vButton {
  margin-right: -5px;
  padding: 11px 16px;
}
.login-wrap {
  position: relative;
  width: 100%;
  height: calc(100%);
  /* background: url(../../assets/img/login-bg.png) no-repeat #000;
  background-size: 100%;
  background-position-y: -245px; */
  background: url(../../assets/img/login_bg_fspay.png) center no-repeat;
  background-size: cover;
}
.ms-title {
  padding-top: 20px;
  width: 100%;
  margin-bottom: 10px;
  line-height: 50px;
  text-align: center;
  font-size: 28px;
  /* color: #fff; */
}
.ms-title1 img {
  width: 350px;
  padding-top: 70px;
  padding-left: 70px;
}
.ms-title img {
  padding-top: 30px;
}
.ms-login {
  position: absolute;
  padding-left: 10px;
  padding-right: 10px;
  left: 80%;
  top: calc(50%);
  width: 400px;
  height: 460px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
}
.ms-content {
  padding: 30px 30px;
}
.ms-content1 {
  margin-bottom: 25px;
}
.login-btn {
  text-align: center;
  margin-top: 20px;
}
.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
  background: #2e71d9;
}
// .login-tips {
//   font-size: 12px;
//   line-height: 30px;
//   color: #fff;
// }
.validation {
  margin-bottom: 20px;
  display: flex;
  width: 100%;
}
.el-input__suffix {
  right: 0px !important;
}
input {
  background: #f0f0f0 !important;
}
.wid {
  width: 60%;
  /* width: 100%; */
}
/* .wid input{
  width: 55% !important;
} */
.validation {
  margin-bottom: 25px;
  position: relative;
}
.code {
  position: absolute;
  height: 38px;
  right: -5px;
}
.oldurl {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  margin-top: -20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.oldurl img {
  height: 18px;
  margin-right: 10px;
}
.oldurl a {
  color: red;
  font-size: 16px;
}
.passwordBox {
  width: 100%;
  margin-top: -15px;
  margin-bottom: 10px;
  padding: 0 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.passwordBox .forgotpassword {
  color: #00152a;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
}
.login-center {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  overflow-y: auto;
}
.login-tips {
  overflow: hidden;
  width: 100vw;
  height: 219px;
  background-color: #abb5bf;
  opacity: 0.7;
  // position: absolute;
  // bottom: -219px;
  .login-tips-title {
    // text-align: center;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -10px;
    p:nth-child(2) {
      margin: 0 20px;
    }
    img {
      width: 108px;
      height: 38px;
    }
  }
}
</style>